<template>
  <div class="ntoken-wrap">
    <div v-if="step === 0" class="no-ntoken">
      <div class="content">
        <div class="title_box">
          <div class="left">
            <span><img src="@/assets/font-img/6.png" /></span>
            <label
              >Make tradeable collections of any sizes, 1 to however many NFTs you want to combine! uTokens are
              compatible with any type of NFTs (ERC-721 and ERC-1155).</label
            >
          </div>
          <div class="right">
            <img src="@/assets/icons/ntoken-bg.png" />
          </div>
        </div>
        <div class="create_box">
          <div class="nav">
            <span><img src="@/assets/font-img/4.png" /></span>
            <Button v-if="!wallet.connected" ghost size="large" @click="$accessor.wallet.openModal"
              >Connect to Wallet</Button
            >
            <Button v-else ghost size="large" @click="onCreate">Create ηToken</Button>
          </div>
          <div class="not_token">No tokens found</div>
          <!-- <div class="nft_token">
            <RenderNft/>
          </div> -->
          <div class="info">
            <span><img src="@/assets/font-img/5.png" /></span>
            <label
              >ηToken collections require a specific amount of ηTokens voted to unlock the collection's NFTs. This
              threshold is set once by the collection creator and can't be changed. Once the collection has been
              unlocked, ηToken holders can convert their ηTokens into the ETH used to purchase those NFTs.</label
            >
          </div>
        </div>
      </div>
    </div>

    <div v-else-if="step === 1" class="ntoken-create">
      <div class="content">
        <div class="tip"><img src="@/assets/font-img/2.png" /></div>
        <RenderFormItem :title="'ηToken Name'">
          <div class="input-btw">
            <input
              :value="form.name"
              maxlength="28"
              type="text"
              placeholder="ηToken Name"
              class="custom-input"
              @input="onChange($event, 'name')"
            />
            <span v-if="form.name && !nexts.name" class="s-next" @click="onNextInput('name')">Next</span>
            <img v-if="nexts.name" src="@/assets/icons/success.png" />
          </div>
        </RenderFormItem>
        <RenderFormItem :title="'Ticker symbol'">
          <div class="input-btw">
            <input
              :value="form.symbol"
              maxlength="14"
              type="text"
              placeholder="Ticker symbol"
              class="custom-input"
              :disabled="!nexts.name"
              @input="onChange($event, 'symbol')"
            />
            <span v-if="nexts.name && !nexts.symbol" class="s-next" @click="onNextInput('symbol')">Next</span>
            <img v-if="nexts.symbol" src="@/assets/icons/success.png" />
          </div>
        </RenderFormItem>
        <RenderFormItem :title="'Total Supply'">
          <div class="input-btw">
            <input
              maxlength="14"
              type="text"
              placeholder="ηToken Name"
              class="custom-input"
              :disabled="!nexts.symbol"
            />
            <span v-if="nexts.symbol && !nexts.total" class="s-next" @click="onNextInput('total')">Next</span>
            <img v-if="nexts.total" src="@/assets/icons/success.png" />
          </div>
        </RenderFormItem>
        <RenderFormItem :title="'Percentage of supply needed to unlock NFT collection (Recommended 30%+)'">
          <div class="input-btw">
            <input
              maxlength="20"
              placeholder="Percentage of supply needed to unlock NFT collection "
              class="custom-input"
              :disabled="!nexts.total"
            />
            <span v-if="nexts.total && !nexts.percent" class="s-next" @click="onNextInput('percent')">Next</span>
            <img v-if="nexts.percent" src="@/assets/icons/success.png" />
          </div>
        </RenderFormItem>
        <div class="input-flex">
          <RenderFormItem :title="'Prior Ratio'">
            <div class="input-btw">
              <input
                maxlength="20"
                placeholder="0.00%"
                :value="form.percent"
                class="custom-input"
                :disabled="!nexts.percent"
                @input="onChange($event, 'percent')"
              />
              <span v-if="nexts.percent && !nexts.prior" class="s-next" @click="onNextInput('prior')">Next</span>
              <img v-if="nexts.prior" src="@/assets/icons/success.png" />
            </div>
          </RenderFormItem>
          <img src="@/assets/icons/change.png" />
          <RenderFormItem :title="'Posterior Ratio'">
            <input maxlength="20" placeholder="0.00%" :value="form.percent" class="custom-input" disabled />
          </RenderFormItem>
        </div>

        <RenderFormItem :title="'Description (Optional)'" :subtitle="'max 255 characters'">
          <div class="input-btw">
            <input maxlength="255" placeholder="Optional" class="custom-input" :disabled="!nexts.prior" />
            <span v-if="nexts.prior && !nexts.des" class="s-next" @click="onNextInput('des')">Next</span>
            <img v-if="nexts.des" src="@/assets/icons/success.png" />
          </div>
        </RenderFormItem>
        <Button size="large" type="primary" :disabled="nextStatus" block style="margin-top: 30px" @click="onNext"
          >Next Step</Button
        >
      </div>
    </div>
    <div v-else-if="step === 2" class="ntoken-select">
      <div class="tip">Select NFTs</div>
      <div class="ntoken-select-wrap">
        <div class="title">Add NFTs</div>
        <div class="fs-container" style="margin-bottom: 24px">
          <input
            type="text"
            class="custom-input-gray-border"
            :value="inputName"
            maxlength="24"
            placeholder="Copy or paste address"
            @input="onAddChange"
          />
          <Button type="danger" size="large" style="margin-left: 18px" :disabled="!inputName" @click="onAddClick"
            >Add</Button
          >
        </div>
        <div v-if="nfts.length !== 0" class="title">Select NFTs</div>
        <div style="max-height: 300px; overflow-y: auto">
          <div
            v-for="(item, i) in nfts"
            :key="i"
            :class="selectKey === i ? 'nft-item-active nft-item' : 'nft-item nft-item-default'"
            @click="onSelect(i)"
          >
            <div>
              <img src="@/assets/icons/radio.png" />
              <span class="text">{{ item.name }}</span>
            </div>
            <span class="text">{{ item.num }}</span>
          </div>
        </div>
      </div>
      <Button size="large" type="primary" block style="margin-top: 30px" :disabled="nfts.length === 0" @click="onNext1"
        >Next Step</Button
      >
    </div>
    <div v-else-if="step === 3" class="notoken-fund">
      <div class="tip">Fund Liquidity Pool (Optional)</div>
      <div class="content">
        <p>Your Liquidity</p>
        <div class="add-btn" @click="onLiquidity('liquidity')">Add Liquidity(Swap)</div>
        <div class="add-btn1" @click="onLiquidity('supply')">SUPPLY</div>
      </div>
      <div class="btn-wrap">
        <div class="back-btn" @click="onBack">Back</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'nuxt-property-decorator'
import { mapState } from 'vuex'
import { Button } from 'ant-design-vue'
import { createNToken, supply } from '@/utils/create-demo'
import { getUnixTs } from '@/utils'

export default Vue.extend({
  components: {
    Button
  },
  data() {
    return {
      step: 0,
      form: {
        name: '',
        symbol: ''
      },
      inputName: '',
      nfts: [],
      selectKey: 0,
      nextInput: false,
      nextInput1: false,
      nexts: {},
      nextStatus: true
    }
  },
  computed: {
    ...mapState(['wallet'])
  },
  watch: {
    nexts(val, nval) {
      if (nval.name && nval.percent && nval.prior && nval.symbol && nval.total) {
        this.nextStatus = false
      }
    }
  },
  methods: {
    onCreate() {
      this.step = 1
    },
    onNext() {
      const key = getUnixTs().toString()

      createNToken(this.$web3, this.$wallet)
        .then((txid) => {
          this.$notify.info({ key, message: 'Transaction has been sent', description: '' })
          const description = ''
          this.$accessor.transaction.sub({ txid, description })
          setTimeout(() => {
            this.step = 2
          }, 1000)
        })
        .catch((error) => {
          this.$notify.info({ key, message: error, description: '' })
        })
    },
    onNext1() {
      this.step = 3
    },
    onChange(e: any, name: string) {
      const val = e.target.value
      const value = val.replace(/[\W]/g, '')

      // @ts-ignore
      this.form[name] = value
    },
    onSelect(i: number) {
      this.selectKey = i
    },
    onLiquidity(str: string) {
      this.$router.push(`/${str}`)
    },
    onBack() {
      this.step = 0
    },
    onNextInput(name: string) {
      // @ts-ignore
      this.nexts = { ...this.nexts, [name]: true }
    },

    onAddClick() {
      this.inputName = ''
      if (this.nfts.length === 0) {
        // @ts-ignore
        this.nfts.push({ name: 'Token Name', num: 1 }, { name: 'Token Name', num: 1 })
      }
    },
    onAddChange(e: any) {
      this.inputName = e.target.value
    }
  }
})
</script>

<style lang="less" scoped>
@import '../styles/variables';
.ntoken-wrap {
  margin: 100px auto 100px auto;
  .no-ntoken {
    display: flex;
    align-items: center;
    justify-content: center;
    .content {
      width: 960px;
      display: flex;
      flex-direction: column;
      .title_box {
        width: 960px;
        height: 184px;
        background: linear-gradient(315deg, #f15726 0%, #ffa348 100%);
        border-radius: 24px;
        margin-bottom: 30px;
        display: flex;
        box-sizing: border-box;
        .left {
          width: 600px;
          display: flex;
          flex-direction: column;
          color: #fff;
          padding: 30px 0 30px 30px;
          span {
            font-size: 24px;
            font-family: @fre-font;
          }
          label {
            font-size: 18px;
          }
        }
        .right {
          flex: 1;
        }
      }
      .create_box {
        width: 960px;
        border-radius: 24px;
        background: #fff;
        padding: 30px;
        box-sizing: border-box;
        .nav {
          display: flex;
          justify-content: space-between;
          align-items: center;
          span {
            color: @p-color;
            font-size: 24px;
            font-family: @fre-font;
          }
        }
        .not_token {
          width: 100%;
          height: 120px;
          background: fade(@gray-color2, 40);
          color: @gray-color3;
          line-height: 120px;
          font-size: 24px;
          border-radius: 24px;
          font-family: @fre-font;
          text-align: center;
          margin: 30px 0;
        }
        .nft_token {
          min-height: 80px;
          width: 100%;
          background: fade(@gray-color2, 40);
          border-radius: 24px;
          margin: 30px 0;
          padding: 30px;
          box-sizing: border-box;
        }
        .info {
          display: flex;
          flex-direction: column;
          span {
            color: @p-color;
            font-size: 24px;
            font-family: @fre-font;
            margin-bottom: 20px;
          }
          label {
            color: #7a736c;
            font-size: 18px;
          }
        }
      }
    }
  }
  .ntoken-create {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 500px;
    overflow-y: auto;
    width: 600px;
    margin: 0 auto;
    .input-btw {
      border-radius: 12px;
      height: 60px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      > img {
        right: 9px;
        position: absolute;
      }
      .s-next {
        width: 72px;
        height: 42px;
        line-height: 42px;
        text-align: center;
        border-radius: 8px;
        background: #ffe4c5;
        color: #ffa348;
        font-size: 18px;
        font-weight: bold;
        cursor: pointer;
        position: absolute;
        right: 9px;
      }
    }
    .input-flex {
      display: flex;
      align-items: center;
      justify-content: center;
      input {
        width: 276px;
      }
      > img {
        width: 48px;
        margin-top: 30px;
      }
    }
    .content {
      width: 600px;
      display: flex;
      flex-direction: column;
    }
  }
  .ntoken-select {
    width: 600px;
    margin: 0 auto;
    .ntoken-select-wrap {
      background: #fff;
      border-radius: 12px;
      padding: 30px;
      .title {
        font-size: 18px;
        font-weight: bold;
        color: @p-color;
        margin-bottom: 24px;
      }
      .nft-item {
        border-radius: 12px;
        display: flex;
        justify-content: space-between;
        padding: 0 25px;
        box-sizing: border-box;
        cursor: pointer;
        height: 60px;
        align-items: center;
        img {
          margin-right: 18px;
        }
        .text {
          font-size: 18px;
          color: @p-color;
          font-weight: bold;
        }
      }
      .nft-item-default {
        background: fade(#fff, 60);
        img {
          visibility: hidden;
        }
      }
      .nft-item-active {
        background: #fff;
        img {
          visibility: inherit;
        }
      }
    }
  }

  .notoken-fund {
    width: 600px;
    margin: 0 auto;
    .content {
      background: #fff;
      border-radius: 24px;
      padding: 60px 24px;
      p {
        font-size: 24px;
        font-family: @fre-font;
        color: @p-color;
        text-align: center;
      }
      .add-btn {
        height: 84px;
        background: @s-color;
        border-radius: 12px;
        margin-top: 20px;
        line-height: 84px;
        text-align: center;
        color: #fff;
        font-size: 18px;
        cursor: pointer;
      }
      .add-btn1 {
        height: 84px;
        background: #ffa348;
        border-radius: 12px;
        margin-top: 20px;
        line-height: 84px;
        text-align: center;
        color: #fff;
        font-size: 18px;
        cursor: pointer;
      }
    }
    .btn-wrap {
      display: flex;
      justify-content: flex-end;
      margin-top: 30px;
      width: 100%;
      .back-btn {
        width: 180px;
        height: 60px;
        border-radius: 12px;
        color: #fff;
        line-height: 60px;
        background: #e0b391;
        font-size: 18px;
        text-align: center;
        cursor: pointer;
      }
    }
  }

  .tip {
    margin-bottom: 50px;
    font-size: 35px;
    font-family: @fre-font;
    color: @p-color;
    text-align: center;
  }
}
</style>
